import {StyleSheet} from 'react-native'
import {autoSize} from "./common";
import {NAVBAR_HEIFHT, SCREEN_HEIGHT, SCREEN_WIDTH} from "../../constant";
import Colors from "./Colors";


export const timeAreaStyles = StyleSheet.create({
    container: {
        width: SCREEN_WIDTH,
        height: autoSize(85),
        backgroundColor: Colors.White,
    },
    col: {
        width: SCREEN_WIDTH,
        // height:autoSize(85),
        backgroundColor: Colors.White,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    actionBar: {
        width: SCREEN_WIDTH,

        backgroundColor: Colors.White,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between'
    },

    actionsContainer: {
        paddingHorizontal: 10,
        alignItems: 'center'
    },
    actionsTextContainer: {
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    actionButton: {
        width: SCREEN_WIDTH,
        height: autoSize(52),
        backgroundColor: Colors.Active,
    },
    symbol: {},
    timeAxis: {
        height: autoSize(85),
        backgroundColor: Colors.Background,
        position:'relative'
    },
    pickerArea: {
        bottom: 0,
        left: 0,
        width: SCREEN_WIDTH / 8,
        height: autoSize(60),
        backgroundColor: Colors.Active,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderLeftColor: Colors.DarkGray,
        borderRightColor: Colors.DarkGray,
        opacity:0.7
    },


    dragFlagContainer: {
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    dragFlagLeft: {
        width: 20,
        height: 20,
        backgroundColor: Colors.White,
        borderWidth: 1,
        borderColor: Colors.DarkGray,
        borderRadius: 10,
        marginLeft: -10
    },
    dragFlagRight: {
        width: 20,
        height: 20,
        backgroundColor: Colors.White,
        borderWidth: 1,
        borderColor: Colors.DarkGray,
        borderRadius: 10,
        marginRight: -10
    },
    selectTimeBtnContainer: {
        display: 'flex',
        flexDirection: 'row',
        width: SCREEN_WIDTH,
        height: autoSize(50),
        borderTopColor: Colors.Separate,
        borderBottomColor: Colors.Separate,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        backgroundColor:Colors.White
    },
    selectTimeBtn: {
        display: 'flex',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    selectTimeSeparate: {
        width: 1,
        backgroundColor: Colors.Separate,
        height: '100%'
    },
    loadingRoomInfo:{
        position:'absolute',
        left:0,
        top:0,
        display:'flex',
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'rgba(0,0,0,0.3)',
        width:SCREEN_WIDTH,
        height:autoSize(85),
    }

});

